<!-- 导航栏 -->
<template>
  <Header :style="{width: '100%'}">
    <Menu mode="horizontal" theme="dark" active-name="TaoProject">
      <div>
        <MenuItem name="TaoProject">
        <div>
          <Button @click="btnActionHome" type="warning">淘方案</Button>
        </div>
        </MenuItem>
      </div>

      <div class="layout-navleft">
        <MenuItem name="Search">
        <div>
          <Input style='width:300px' search @on-search='btnAcitonserach()' v-model='value' placeholder="输入方案 ID 或者关键词" />
        </div>
        </MenuItem>
        <MenuItem name="contact">
        <div v-on:click="btnActioncontact">
          <span>客服中心</span>
        </div>
        </MenuItem>
      </div>

      <div class="layout-nav">
        <!-- 用来判断登录了没有 -->
        <template v-if="!this.$store.state.token">
          <MenuItem name="Login">
          <div>
            <Button @click="btnActionLogin" type="info">登录</Button>
          </div>
          </MenuItem>
          <MenuItem name="Register">
          <div>
            <Button @click="btnActionRegister" type="success">注册</Button>
          </div>
          </MenuItem>
        </template>
        <template v-else>
          <MenuItem name="collect">
          <div v-on:click="btnActionMyCollect">
            <span>我的收藏</span>
          </div>
          </MenuItem>
          <MenuItem name="User">
          <div>
            <Dropdown>
              <a href="javascript:void(0)" style="color:white">
                <Button type="info">{{this.$store.state.name}}</Button>
              </a>
              <DropdownMenu slot="list">
                <DropdownItem>
                  <div v-on:click="btnActionAccountSetting">
                    <span>账户设置</span>
                  </div>
                </DropdownItem>
                <DropdownItem>
                  <div v-on:click="btnActionLogOut">
                    <span>注销</span>
                  </div>
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </div>
          </MenuItem>
        </template>
      </div>
    </Menu>
  </Header>
</template>

<script>

  export default {
    data() {
      return {
        //API 接口
        url: {
          categories: this.$Global.url.categories,
          logout: this.$Global.url.logout
        },
        //数据库获取的数据
        categoriesData: {
          name: ""
        },
        //搜索框输入值
        value: ""
        //判断是否登录
        // haveLogin: '',
      };
    },
    methods: {
      /******************按钮操作**********************/

      /**
       * 跳转至主页
       */
      btnActionHome: function () {
        this.$router.push("/");
      },

      /**
       * 跳转至登录页面
       */
      btnActionLogin: function () {
        this.$router.push("/Login");
      },

      /**
       * 跳转至注册页面
       */
      btnActionRegister: function () {
        this.$router.push("/Register");
      },

      /**
       * 跳转至用户设置页面
       */
      btnActionAccountSetting: function () {
        this.$router.push("/Setting");
      },

      /**
       * 跳转至收藏页面
       */
      btnActionMyCollect: function () {
        this.$router.push("/Collect");
      },

      /**
       * 注销后返回未登录的主页
       */
      btnActionLogOut: function () {
        this.$store.commit("logout");
        this.$router.push("/");
      },

      /**
       * 进入客服中心
       */
      btnActioncontact() {
        this.$router.push("/contact");
      },

      /**
       * 回车或点击按钮搜索功能。
       */
      btnAcitonserach() {
        this.$router.push({
          name: "SerachResult",
          params: { keyword: this.value }
        });
      },

      //********************获取数据*****************************
      /**
       * 获取数据库里的分类信息
       */
      getCategories() {
        this.$http
          .get(this.url.categories)
          .then(res => {
            if (res.status == 200) {
              this.categoriesData = res.data.categories;
            }
          })
          .catch(error => console.log(error));
      }
    },

    created() {
      /**
       * 开发模式下，拼接地址，形成完整的API接口
       */
      if (process.env.NODE_ENV === "development") {
        this.url.categories =
          this.$Global.url.baseUrl + this.$Global.url.categories;
        this.url.logout = this.$Global.url.baseUrl + this.$Global.url.logout;
      }
      this.getCategories();
    }
  };
</script>

<style scoped>
  .layout-navleft {
    float: left;
    width: 500px;
    margin: 0 auto;
    margin-left: 88px;
  }

  .layout-nav {
    float: right;
    /* width: 420px; */
    margin: 0 auto;
    /* margin-left: 200px; */
  }
</style>